<!DOCTYPE html>
<html>
 <head>
  <!--声明当前页码的编码集：charset=gbk,gb2312(中文编码),utf-8(国际编码)-->
		<meta http-equiv="content-Type" content="text/html;charset=utf-8">
		<!--当前页面的三要素-->
		<title></title>
		<meta name="keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
  <style type="text/css">
  *{margin:0;padding:0;}
  body{font-size:16px;font-family:"微软雅黑";}
  .menu{width:200px;background-color:#fff;box-shadow:0 0 10px #ccffff;display:none;position:absolute;} 
  .menu ul li{border-bottom:1px solid #c9c9c9;line-height:40px;padding-left:10px;list-style:none;}
  .menu ul li:hover{background:#000000;color:#fff;}

  #zb{font-size:12px;color:#fff;text-align:center;}

  </style>
 </head>

 <body>
 <div class="menu">
	<ul>
		<li>添加应用</li>
		<li>获取课程</li>
		<li>添加笔记</li>
		<li>刷新</li>
		<li>上传资料</li>
		<li>更新背景</li>
		<li>注销</li>
	</ul>
 </div>
 <p id="zb"></p>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	// 屏蔽浏览器自带的右键
	document.oncontextmenu = function(){
		return false;
	}

	// 点击鼠标键
	$(document).mousedown(function(e){
		// 鼠标键 1(左键)，2鼠标滚轮，3右键
		var key = e.which; 
		// 点击鼠标右键
		if(key == 3){
			var x = e.clientX; // x 横坐标
			var y = e.clientY; // y 纵坐标
			// $("#zb").html("x = " + x + "  ,  y = " + y); 显示坐标值

			// 获取menu的宽度和高度
			var menuHeight = $(".menu").height();
			var menuWidth = $(".menu").width();
			// 获取浏览器的可见高度和宽度
			var clientHeight = getClientHeight();
			var clientWidth = getClientWidth();
			// 判断
			if(menuHeight + y > clientHeight){
				y = clientHeight - menuHeight - 5;
			}
			if(menuWidth + x > clientWidth){
				x = clientWidth - menuWidth - 5;
			}
			$(".menu").show().css({left:x,top:y});
		}

	});

	// 点击空白区域 隐藏鼠标右键
	$(document).click(function(){
		$(".menu").hide();
	});
	

	// 点击每一项右键所需要执行的方法
	function tz_menu(i){
		if(i == 1){
			alert("添加应用");
		} else if(i == 2){
			alert("获取课程");
		}
	}
	

	// 浏览器的可见高度
	function getClientHeight() {
		var clientHeight = 0;
		if (document.body.clientHeight && document.documentElement.clientHeight) {
			clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
		} else {
			clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
		}
		return clientHeight;
	}

	// 浏览器的可见宽度
	function getClientWidth() {
		var clientWidth = 0;
		if (document.body.clientWidth && document.documentElement.clientWidth) {
			clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
		} else {
			clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
		}
		return clientWidth;
	}

</script>
</body>
</html>
